import React, { useEffect, useState } from 'react';
import { message, Spin } from 'antd';
import moment from 'moment/moment';
import { getOperateRec } from '@/pages/Task/services';
import mapping from '@/pages/Task/MyTask/containers/MyTaskInfoModal/changeInfoKeyRenderMapping';
import { TaskOperateType } from '@/pages/Task/utils';
import styles from './index.less';

const OperationRec = ({ location, activeKey, refreshComp }) => {
    const { query: urlQuery } = location;
    const [loading, setLoading] = useState(false);
    // 0-   1+
    const [data, setData] = useState([]);
    const [expandArr, setExpandArr] = useState([]);

    const fetchRecord = async () => {
        setLoading(true);
        const params = { id: urlQuery.id };
        const result = await getOperateRec(params);
        const { data: d, code } = result;
        if (code !== 10000 || !d) {
            message.error(result.msg);
            return;
        }
        setData(
            d.map(item => {
                let list = item.operateRemark;
                list = list ? JSON.parse(list) : null;
                const obj = { operateRemark: list };
                return { ...item, ...obj };
            })
        );
        setLoading(false);
    };
    const getRemarkContent = list => (
        <div className={styles.detailContainer}>
            {list.map(({ field, fieldName, beforeVal, afterVal }, index) => {
                const render = value => {
                    const r = mapping[field];
                    if (r) {
                        return r(value);
                    }
                    return !value && value !== 0 ? '' : value;
                };
                const key = index;
                return (
                    <ul key={key} className={styles.list}>
                        <li className={styles.listItem}>
                            <p>修改了:</p>
                            <p>{fieldName}</p>
                        </li>
                        <li className={styles.listItem}>
                            <p>旧值为:</p>
                            <p>{render(beforeVal)}</p>
                        </li>
                        <li className={styles.listItem}>
                            <p>新值为:</p>
                            <p>{render(afterVal)}</p>
                        </li>
                    </ul>
                );
            })}
        </div>
    );
    useEffect(() => {
        if (activeKey === 'operationRec') {
            fetchRecord();
        }
    }, [activeKey, refreshComp]);
    return (
        <Spin spinning={loading}>
            <div>
                <ul>
                    {data &&
                        data.map((item, index) => (
                            <li key={item.id}>
                                <div>
                                    <p style={{ marginBottom: '14px', display: 'flex' }}>
                                        <span>
                                            {index + 1}、{moment(item.operateTime).format('YYYY-MM-DD HH:mm')},由【
                                            {item.operateEmployeeName}】操作【
                                            {item.operateName}】
                                        </span>
                                        {!!(item.operateCode === TaskOperateType.CHANGE && item.operateRemark) && (
                                            <i
                                                className={
                                                    expandArr[index]
                                                        ? 'icon iconfont iconminus-square'
                                                        : 'icon iconfont iconplus-square'
                                                }
                                                style={{
                                                    color: '#FF9E00',
                                                    cursor: 'pointer',
                                                    marginLeft: '4px',
                                                    fontSize: '16px'
                                                }}
                                                onClick={() => {
                                                    const copy = [...expandArr];
                                                    copy[index] = !expandArr[index];
                                                    setExpandArr(copy);
                                                }}
                                            ></i>
                                        )}
                                    </p>
                                    {!!(
                                        item.operateCode === TaskOperateType.CHANGE &&
                                        item.operateRemark &&
                                        expandArr[index]
                                    ) && getRemarkContent(item.operateRemark)}
                                </div>
                            </li>
                        ))}
                </ul>
            </div>
        </Spin>
    );
};

export default OperationRec;
